﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>前台用户列表</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	   $(function(){
	       $('#userlist').datagrid({  
      				title:'前台用户列表',  
      				iconCls:'icon-save',
      				data:{
                          "total":10,
                          "rows":[
                              {"name":"张三","nickname":"服务商员工1","phone":"1234567","wechat":"1111111111","qq":"22222222222","sex":"女"
                             ,"commpanyname":"全能家政服务","commpanytype":"生活","flag":"启用"},
                              {"name":"李四","nickname":"服务商员工1","phone":"1234567","wechat":"1111111111","qq":"22222222222","sex":"女"
                             ,"commpanyname":"全能家政服务","commpanytype":"生活","flag":"启用"},
                              {"name":"王五","nickname":"服务商员工1","phone":"1234567","wechat":"1111111111","qq":"22222222222","sex":"女"
                             ,"commpanyname":"期货服务","commpanytype":"生活","flag":"启用"},
                              {"name":"赵六","nickname":"服务商员工1","phone":"1234567","wechat":"1111111111","qq":"22222222222","sex":"男"
                             ,"commpanyname":"期货服务","commpanytype":"商务","flag":"启用"},
                              {"name":"王七","nickname":"服务商员工1","phone":"1234567","wechat":"1111111111","qq":"22222222222","sex":"男"
                             ,"commpanyname":"期货服务","commpanytype":"商务","flag":"启用"},
                              {"name":"刘八","nickname":"普通用户","phone":"1234567","wechat":"1111111111","qq":"22222222222","sex":"男"
                             ,"commpanyname":"-","commpanytype":"-","flag":"启用"}
                          ]
                      },  
      				columns:[[  
                					       {field:'name',title:'姓名',width:100,align:'center'},  
                					       {field:'phone',title:'电话',width:100,align:'center'},  
                					       {field:'wechat',title:'微信号',width:100,align:'center'},
                                 {field:'qq',title:'QQ',width:200,align:'center'},
                                 {field:'commpanyname',title:'所属服务商',width:100,align:'center'},
                                 {field:'commpanytype',title:'服务商类型',width:100,align:'center'},
                                 {field:'flag',title:'状态',width:100,align:'center'},
                                 {field:'cz',title:'操作',width:200,align:'center',formatter:function(val,row){
                                       return "<a href='javascript:showDg();'>查看</a>";
                                 }}
                          ]],  
      				toolbar: "#tooldiv",  
      				pagination: true,
      				singleSelect:true
			});


          
          //初始化修改窗口  
         $('#dg').dialog({
			    title: '用户详情',
			    width: 700,
			    height: 700,
			    closed: true,
			    cache: false,
			    modal: true,
			    iconCls: 'icon-save'
			});

         //初始化查询按钮
         $("#submit_search").linkbutton({ iconCls: 'icon-search', plain: true })
            .click(function () {
                 alert("开始查询");
            });
            
	   });

        //查询弹出方法
       function showDg(){
             $('#dg').dialog("open");
       }
	</script>
</head>
<body>
  <div id="tooldiv">
      <input type="text"  placeholder="请输入查询用户名"/>
      <input type="text"  placeholder="请输入查询电话"/>
      <input type="text"  placeholder="请输入查询微信"/>
      <input type="text"  placeholder="请输入查询QQ"/>
      <select>
          <option value="">请选用户类型</option>
          <option value="">普通用户</option>
          <option value="">生活服务商</option>
          <option value="">商务服务商</option>
      </select>
      <a id="submit_search">搜索</a>
      <a  class="easyui-linkbutton" data-options="iconCls:'icon-remove'" >禁用</a>
      <a  class="easyui-linkbutton" data-options="iconCls:'icon-add'" >启用</a>
  </div>
  <table id="userlist"></table>
    <div id="dg">
           <div align="center" style="margin-top: 30px">
            <div style="margin-bottom:20px">
             <img src="./images/tx.jpg" alt="" style="width: 150px; height:150px;" />
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'姓名:'" readonly="true" value="张三" />
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'昵称:'" readonly="true" value="服务商员工1"/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%" data-options="label:'电话:'" readonly="true" value="123456"/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'微信号:'" readonly="true" value="11111111111"/>
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'QQ:'" readonly="true" value="2222222222"/>
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'所属服务商:'" readonly="true" value="全能家政服务" />
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'服务商类型:'" readonly="true" value="VIP2"/>
            </div> 
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'性别:'" readonly="true" value="男"/>
            </div> 
             <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'注册时间:'" readonly="true" value="2021-1-1"/>
            </div> 
             <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:50%;" data-options="label:'状态:'" readonly="true" value="启用"/>
            </div> 
        </div>
   </div>
</body>
</html>